`<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title of the document</title>
	  <link rel="stylesheet" href="styles.css">
</head>
<body>

	  <div id="content">
	    <div id='loading'>

		     <div id="status">
		          <progress max="7" value="0"></progress>
		      </div>
	    </div>

    <div id="demo">
	      <p>
	        <button id="add">Add images</button>
	        <button id="reset">Reset demo</button>
	      </p>
	      <div id="image-container"></div>
    </div>


    <div  class='imageload' data-alt='http://lorempixel.com/'>
    </div>
    <div  class='imageload' data-alt='http://lorempixel.com/'>
    </div>



	<script src="./ImagesLoaded_files/jquery-2.1.3.min.js"></script>
	<script src="./ImagesLoaded_files/imagesloaded.pkgd.js"></script>



	<script type="text/javascript">
		$( document ).ready(function() {
	 		

		  var demo = document.querySelector('#demo');
  		  var container = demo.querySelector('#image-container');
		  demo.querySelector('#add').onclick = function() {
			    // add new images
			    var fragment = getItemsFragment();
			    container.insertBefore( fragment, container.firstChild );
			    // use ImagesLoaded
			    var imgLoad = imagesLoaded( container );
			    imgLoad.on( 'progress', onProgress );
			    imgLoad.on( 'always', onAlways );
			    // reset progress counter
		  };

 			demo.querySelector('#reset').onclick = function() {
				    empty( container );
		   };

			function onProgress( imgLoad, image ) {
			  // change class if the image is loaded or broken
			  image.img.parentNode.className = image.isLoaded ? '' : 'is-broken';
			}
			function onAlways(image) {
			 // statusElem.style.opacity = 0;
			// console.log(image);
			}

// return doc fragment with
			function getItemsFragment() {
			    var fragment = document.createDocumentFragment();
			   $( ".imageload" ).each(function( index ) {
					  var item = getImageItem($(this).attr('data-alt'));
			  		  fragment.appendChild( item );
				});
			   return fragment;
			}

		
			// return an <li> with a <img> in it
			function getImageItem(end) {
				  var item = document.createElement('li');
				  item.className = 'is-loading';
				  var img = document.createElement('img');
				  var size = Math.random() * 10 + 1;
				  var width = Math.random() * 110 + 100;
				  width = Math.round( width * size );
				  var height = Math.round( 140 * size );
				  var rando = Math.ceil( Math.random() * 1000 );
				  // 10% chance of broken image src
				  // random parameter to prevent cached images
				  img.src = end + width + '/' + height + '/' + '?' + rando;
				  item.appendChild( img );
				  //console.log(img);
				  return item;
			}

			function empty( elem ) {
			  while ( elem.firstChild ) {
			    elem.removeChild( elem.firstChild );
			  }
			}
		  $( '#add').trigger( "click" );			
	 	});


	</script>
</body>

</html>